<template>
	<view>
		<!-- <uni-section title="查询" sub-title="根据用户条件查询" type="line">
			<view class="example">
				<uni-forms ref="form" :modelValue="queryParams">
					<uni-forms-item label="账号" name="">
						<uni-easyinput v-model="queryParams.username" placeholder="" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section> -->
		<uni-section title="操作区域" sub-title="该类型为软件接收到的所有类型,如需要用户能看到类型,则需要去分配权限" type="line">
			<view class="example">
				<button type="primary" plain size="mini" @click="openCodeTypePopup">新增</button>
			</view>
		</uni-section>
		<uni-table stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th width="120" align="center">类型名称</uni-th>
				<uni-th width="120" align="center">图标</uni-th>
				<uni-th width="120">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="item in codeTypeList">
				<uni-td align="center">{{item.name}}</uni-td>
				<uni-td align="center">
					<image :src="baseUrl+item.icon" mode="" class="logoImage"></image>
				</uni-td>
				<uni-td align="center">
					<view class="uni-group">
						<button class="uni-button" size="mini" type="warn" @click="deleteCodeType(item)">删除</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-popup ref="addCodeTypePopup" type="bottom">
			<view class="add-user-view">
				<uni-section title="新增验证码类型" sub-title="类型名称要与短信内开头的【】一致. 比如:【爱奇艺】您的短信验证码是..." type="line">
					<view class="example">
						<uni-forms :modelValue="addCodeTypeParams">
							<uni-forms-item label="类型名" name="name" required>
								<uni-easyinput v-model="addCodeTypeParams.name" placeholder="请输入类型名称" />
							</uni-forms-item>
							<uni-forms-item label="图标" name="icon" required>
								<uni-file-picker ref="files" :limit="1" :auto-upload="false" @select="selectFiles" />
							</uni-forms-item>
						</uni-forms>
						<button type="primary" @click="addCodeType" class="btn">新增</button>
					</view>
				</uni-section>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '@/common/apiUtil.js'
	export default {
		data() {
			return {
				baseUrl: api.SERVER_BASE,
				codeTypeList: null,
				tempUserData: {},
				queryParams: {
					username: null,
					realname: null
				},
				addCodeTypeParams: {
					name: null,
					icon: null,
				},
				imageValue: ""
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData() {
				this.$get(api.GET_CODE_TYPE_LIST).then(res => {
					this.codeTypeList = res.result.records
				})
			},
			openCodeTypePopup() {
				this.$refs.addCodeTypePopup.open("center");
			},
			addCodeType() {
				console.log(this.addCodeTypeParams)
				this.$post(api.POST_ADD_CODE_TYPE, this.addCodeTypeParams).then(res => {
					console.log(res)
					if (!res.success) {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
						return;
					}
					this.$refs.addCodeTypePopup.close();

					this.getData()
				})
			},
			deleteCodeType(item) {
				console.log(item)
				uni.showModal({
					title: '误触确认',
					content: `确定要删除「${item.name}」吗?`,
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.$delete(api.DELETE_CODE_TYPE_LIST + item.id).then(res => {
								console.log(res)
								uni.showToast({
									title: res.message,
									icon: "none"
								});
								if (res.success) {
									this.getData();
									return;
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			selectFiles(res) {
				console.log(res)
				let token = uni.getStorageSync("token")
				uni.uploadFile({
					url: api.COMMON_UPLOAD,
					header: {
						"Authorization": token
					},
					//刚才用户选择的图片地址
					filePath: res.tempFilePaths[0],
					name: "file",
					success: res => {
						let data = JSON.parse(res.data);
						console.log(data.success)
						if (data.success) {
							uni.showToast({
								title: '上传成功',
								icon: "none"
							});
							
							this.addCodeTypeParams.icon = data.result;
						}
					}
				})
			}
		}
	}
</script>

<style>
	.logoImage {
		width: 80rpx;
		height: 80rpx;
		vertical-align: middle;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.add-user-view {
		background-color: #fff;
		width: 700rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.tag {
		border-radius: 10rpx !important;
		margin-left: 10rpx;
	}

	.btn {
		width: 350rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>